<template>
  <div>
    <!-- 头部 -->
    <div class="dark-top">
      <a @click="goback" class="page-back"><div></div></a>
      <div class="page-title">
        <font style="vertical-align: inherit;">商城认证</font>
      </div>
    </div>
    <!-- 内容 -->
    <div class="dark-body">
      <!-- 姓名 -->
      <div class="release-name">
        <label for="name">姓名：</label>
        <input type="text" ref="name" id="name" v-model="name" />
      </div>
      <!-- 班级 -->
      <div class="release-class">
        <label for="class">班级：</label>
        <input type="text" ref="class" id="class" v-model="nameClass" />
      </div>
      <!-- 上传图片 -->
      <div class="rele-button">
        <div
          class="rele-img1"
          v-for="(item, index) in uploadfile"
          :key="item.url"
        >
          <div
            class="rele-back"
            :style="{ backgroundImage: 'url(' + item.url + ')' }"
          ></div>
          <div class="rele-del" @click="ossDeleteImg(item.name, index)"></div>
        </div>
        <div class="rele-img2">
          <div>
            <input type="file" id="uploadImage" @change="toUploads" />
          </div>
          <span class="rele-add">学生证/一卡通</span>
        </div>
      </div>
      <!-- 发布按钮 -->
      <div class="release-button" @click="updateApprove">认证</div>
    </div>
  </div>
</template>

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script>
const OSS = require("ali-oss");
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      uploadfile: [],
      signaturen: [],
      name: "",
      nameClass: ""
    };
  },
  created() {
    this.ossSignaturen();
    this.selectApprove();
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    toUploads() {
      let me = this;
      const urls = [];
      //oss 基本配置
      var client = new OSS({
        region: this.signaturen.region,
        endpoint: this.signaturen.region,
        accessKeyId: this.signaturen.accessKeyId,
        accessKeySecret: this.signaturen.accessKeySecret,
        bucket: this.signaturen.bucket
      });
      //获取文件信息
      const files = document.getElementById("uploadImage");
      if (files) {
        const fileLen = document.getElementById("uploadImage").files;
        const file = document.getElementById("uploadImage").files[0];
        let consat = file.name;
        let name = "user/" + this.random_string(12) + fileLen[0].name; //上传的文件地址
        for (let i = 0; i < fileLen.length; i++) {
          const file = fileLen[i];
          client
            .put(name, file)
            .then(res => {
              console.log(res);

              me.uploadfile.push({
                url: res.res.requestUrls[0],
                fileUrl: res.res.requestUrls[0],
                name: res.name
              });
              Toast("上传成功");
            })
            .catch(err => {
              console.log(err);
            });
        }
      }

      this.$emit("getUploadData", this.uploadfile);
    },
    //生成随机名字
    random_string(len) {
      len = len || 32;
      var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
      var maxPos = chars.length;
      var pwd = "";
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    },
    ossSignaturen() {
      //oss签名验证
      let me = this;
      this.$axios
        .post("/api/index/oss_ali", {
          emulateJSON: true
        })
        .then(kun => {
          console.log(kun);
          me.signaturen = kun.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    ossDeleteImg(val, index) {
      //oss删除图片
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/index/deletePic",
          { img: val },
          {
            emulateJSON: true
          }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.uploadfile.splice(index, 1);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    updateApprove() {
      // 商城认证
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/mall/goodsBuyAdd",
          {
            uid: localStorage.uid,
            name: this.$refs.name.value,
            class: this.$refs.class.value,
            approve: this.uploadfile
          },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          Toast(kun.msg);
          if (kun.code == 200) {
            me.goback();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    selectApprove() {
      // 获取认证信息
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/mall/goodsBuy",
          { uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.name = kun.data.name;
            me.nameClass = kun.data.class;
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
//头部
.dark-top {
  width: 100%;
  height: 2.75rem;
  color: #1a1a1a;
  position: relative;

  /* 设置渐变 */
  background: rgb(255, 0, 0); /* Old browsers */
  background: -moz-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  .page-back {
    width: 0.5625rem;
    height: 0.9375rem;
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    left: 0.9375rem;
    top: 1.0625rem;

    :first-child {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/return-white.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
  }

  .page-title {
    font-size: 1.125rem;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 0.65rem;
    -ms-transform: translateX(-50%) translateY(0); /* IE 9 */
    -moz-transform: translateX(-50%) translateY(0); /* Firefox */
    -webkit-transform: translateX(-50%) translateY(0); /* Safari 和 Chrome */
    -o-transform: translateX(-50%) translateY(0); /* Opera */
  }
}
//内容
.dark-body {
  width: 21.5625rem;
  margin: 0 auto;

  //姓名
  .release-name {
    width: 21.5625rem;
    height: 3.125rem;
    margin: 1.0625rem auto 0;
    font-size: 1.125rem;
    color: #333333;

    border-bottom: 0.0625rem solid #d6d6d6;
    input {
      border: none;
      font-size: 1.125rem;
      color: #999999;
      outline: medium;
    }
  }
  //班级
  .release-class {
    width: 21.5625rem;
    height: 3.125rem;
    margin: 1.0625rem auto 0;
    font-size: 1.125rem;
    color: #333333;
    border-bottom: 0.0625rem solid #d6d6d6;

    input {
      border: none;
      font-size: 1.125rem;
      color: #999999;
      outline: medium;
    }
  }

  // 上传图片
  .rele-button {
    height: 5.25rem;
    margin-top: 1.0625rem;

    .rele-img1 {
      width: 5.25rem;
      height: 5.25rem;
      float: left;
      position: relative;

      .rele-back {
        width: 5.25rem;
        height: 5.25rem;
        background-image: url(../../assets/login/release.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
      }
      .rele-del {
        width: 0.875rem;
        height: 0.875rem;
        position: absolute;
        top: 0.3125rem;
        right: 0.3125rem;

        background-image: url(../../assets/login/rele-del.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        overflow: hidden;
      }
    }

    .rele-img2 {
      width: 5.25rem;
      height: 5.25rem;
      float: left;
      margin-left: 0.1875rem;
      position: relative;

      :first-child {
        width: 100%;
        height: 100%;
        background-image: url(../../assets/login/rele-img.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;

        input {
          //将input设为透明
          opacity: 0;
        }
      }

      .rele-add {
        font-size: 0.75rem;
        color: #cccccc;
        width: 5rem;
        position: absolute;
        bottom: 0.625rem;
        left: 50%;
        -ms-transform: translateX(-50%) translateY(0); /* IE 9 */
        -moz-transform: translateX(-50%) translateY(0); /* Firefox */
        -webkit-transform: translateX(-50%) translateY(0); /* Safari 和 Chrome */
        -o-transform: translateX(-50%) translateY(0); /* Opera */
      }
    }
  }

  //发布按钮
  .release-button {
    margin: 4.0625rem auto 0;
    width: 21.5625rem;
    height: 3.0625rem;
    border-radius: 1.5625rem;
    font-size: 1.125rem;
    color: #ffffff;
    text-align: center;
    line-height: 3.0625rem;

    /* 设置渐变 */
    background: rgb(255, 0, 0); /* Old browsers */
    background: -moz-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 30%,
      rgb(229, 39, 77) 80%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }
}
</style>
